<route lang="jsonc" type="page">
{
"style": {
"navigationBarTitleText": "呼吸练习",
"navigationBarBackgroundColor": "#00b894",
"navigationBarTextStyle": "white"
}
}
</route>

<script lang="ts" setup>
defineOptions({
  name: 'BreatheGame',
})

// 呼吸练习游戏数据
const breatheGame = ref({
  isPlaying: false,
  phase: 'inhale', // inhale, hold, exhale
  countdown: 4,
  cycle: 0,
  timer: null,
  totalCycles: 10,
  isCompleted: false,
})

// 开始呼吸练习
function startBreatheGame() {
  breatheGame.value.isPlaying = true
  breatheGame.value.phase = 'inhale'
  breatheGame.value.countdown = 4
  breatheGame.value.cycle = 0
  breatheGame.value.isCompleted = false

  breatheGame.value.timer = setInterval(() => {
    breatheGame.value.countdown--

    if (breatheGame.value.countdown === 0) {
      switch (breatheGame.value.phase) {
        case 'inhale':
          breatheGame.value.phase = 'hold'
          breatheGame.value.countdown = 4
          break
        case 'hold':
          breatheGame.value.phase = 'exhale'
          breatheGame.value.countdown = 4
          break
        case 'exhale':
          breatheGame.value.phase = 'inhale'
          breatheGame.value.countdown = 4
          breatheGame.value.cycle++

          // 检查是否完成所有循环
          if (breatheGame.value.cycle >= breatheGame.value.totalCycles) {
            completeExercise()
          }
          break
      }
    }
  }, 1000)
}

// 完成练习
function completeExercise() {
  stopBreatheGame()
  breatheGame.value.isCompleted = true

  uni.showModal({
    title: '练习完成',
    content: `恭喜完成${breatheGame.value.totalCycles}轮呼吸练习！感觉怎么样？`,
    confirmText: '再练一次',
    cancelText: '结束',
    success: (res) => {
      if (res.confirm) {
        resetExercise()
        startBreatheGame()
      }
    },
  })
}

// 停止呼吸练习
function stopBreatheGame() {
  if (breatheGame.value.timer) {
    clearInterval(breatheGame.value.timer)
    breatheGame.value.timer = null
  }
  breatheGame.value.isPlaying = false
}

// 重置练习
function resetExercise() {
  stopBreatheGame()
  breatheGame.value.phase = 'inhale'
  breatheGame.value.countdown = 4
  breatheGame.value.cycle = 0
  breatheGame.value.isCompleted = false
}

// 获取呼吸指引文本
function getBreatheText() {
  switch (breatheGame.value.phase) {
    case 'inhale':
      return '深吸气'
    case 'hold':
      return '屏住呼吸'
    case 'exhale':
      return '缓慢呼气'
    default:
      return ''
  }
}

// 获取呼吸指引描述
function getBreatheDesc() {
  switch (breatheGame.value.phase) {
    case 'inhale':
      return '通过鼻子慢慢吸气，让腹部鼓起'
    case 'hold':
      return '屏住呼吸，感受空气在肺部停留'
    case 'exhale':
      return '通过嘴巴慢慢呼气，让腹部收缩'
    default:
      return ''
  }
}

// 设置练习轮数
function setCycles(cycles: number) {
  breatheGame.value.totalCycles = cycles
}

onUnmounted(() => {
  if (breatheGame.value.timer) {
    clearInterval(breatheGame.value.timer)
  }
})
</script>

<template>
  <view class="breathe-game-container">
    <!-- 进度信息 -->
    <view class="progress-header">
      <view class="cycle-info">
        第 {{ breatheGame.cycle + 1 }} / {{ breatheGame.totalCycles }} 轮
      </view>
      <view class="phase-info">
        {{ getBreatheText() }}
      </view>
    </view>

    <!-- 呼吸引导区域 -->
    <view class="breathe-area">
      <!-- 未开始状态 -->
      <view v-if="!breatheGame.isPlaying && !breatheGame.isCompleted" class="breathe-start">
        <view class="start-icon">
          🧘‍♀️
        </view>
        <view class="start-title">
          呼吸练习
        </view>
        <view class="start-desc">
          跟随节奏进行深呼吸练习<br>
          帮助你放松心情，缓解压力
        </view>

        <!-- 练习轮数选择 -->
        <view class="cycles-selector">
          <view class="selector-label">
            选择练习轮数：
          </view>
          <view class="cycles-options">
            <view
              v-for="cycle in [5, 10, 15, 20]"
              :key="cycle"
              class="cycle-option"
              :class="{ active: breatheGame.totalCycles === cycle }"
              @click="setCycles(cycle)"
            >
              {{ cycle }}轮
            </view>
          </view>
        </view>

        <button class="start-btn" @click="startBreatheGame">
          开始练习
        </button>
      </view>

      <!-- 练习进行中 -->
      <view v-if="breatheGame.isPlaying" class="breathe-container">
        <view class="breathe-circle" :class="breatheGame.phase">
          <view class="breathe-text">
            {{ getBreatheText() }}
          </view>
          <view class="breathe-countdown">
            {{ breatheGame.countdown }}
          </view>
        </view>

        <view class="breathe-description">
          {{ getBreatheDesc() }}
        </view>
      </view>

      <!-- 练习完成状态 -->
      <view v-if="breatheGame.isCompleted && !breatheGame.isPlaying" class="breathe-completed">
        <view class="completed-icon">
          ✨
        </view>
        <view class="completed-title">
          练习完成！
        </view>
        <view class="completed-desc">
          你已经完成了 {{ breatheGame.totalCycles }} 轮呼吸练习<br>
          感觉更放松了吗？
        </view>
      </view>
    </view>

    <!-- 控制按钮 -->
    <view class="game-controls">
      <button
        v-if="breatheGame.isPlaying"
        class="control-btn stop-btn"
        @click="stopBreatheGame"
      >
        暂停练习
      </button>
      <button
        v-if="!breatheGame.isPlaying && (breatheGame.cycle > 0 || breatheGame.isCompleted)"
        class="control-btn restart-btn"
        @click="resetExercise"
      >
        重新开始
      </button>
      <button
        v-if="!breatheGame.isPlaying && breatheGame.cycle > 0 && !breatheGame.isCompleted"
        class="control-btn continue-btn"
        @click="startBreatheGame"
      >
        继续练习
      </button>
    </view>

    <!-- 呼吸练习说明 -->
    <view class="breathe-instructions">
      <view class="instruction-title">
        呼吸练习指南
      </view>
      <view class="breathing-steps">
        <view class="step-item inhale-step">
          <view class="step-number">
            1
          </view>
          <view class="step-content">
            <view class="step-title">
              吸气 (4秒)
            </view>
            <view class="step-desc">
              通过鼻子慢慢深吸气，让腹部自然鼓起
            </view>
          </view>
        </view>
        <view class="step-item hold-step">
          <view class="step-number">
            2
          </view>
          <view class="step-content">
            <view class="step-title">
              屏息 (4秒)
            </view>
            <view class="step-desc">
              屏住呼吸，感受空气在肺部的停留
            </view>
          </view>
        </view>
        <view class="step-item exhale-step">
          <view class="step-number">
            3
          </view>
          <view class="step-content">
            <view class="step-title">
              呼气 (4秒)
            </view>
            <view class="step-desc">
              通过嘴巴慢慢呼气，让腹部自然收缩
            </view>
          </view>
        </view>
      </view>

      <view class="benefits">
        <view class="benefits-title">
          练习益处
        </view>
        <view class="benefit-item">
          • 缓解压力和焦虑
        </view>
        <view class="benefit-item">
          • 提高专注力
        </view>
        <view class="benefit-item">
          • 改善睡眠质量
        </view>
        <view class="benefit-item">
          • 放松身心，恢复平静
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.breathe-game-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  padding: 20rpx;
  padding-bottom: env(safe-area-inset-bottom);
}

// 进度信息
.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  padding: 20rpx 30rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  backdrop-filter: blur(10rpx);
}

.cycle-info,
.phase-info {
  font-size: 28rpx;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

// 呼吸区域
.breathe-area {
  height: 600rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 40rpx;
}

// 开始界面
.breathe-start {
  text-align: center;
  color: #fff;
}

.start-icon {
  font-size: 120rpx;
  margin-bottom: 30rpx;
}

.start-title {
  font-size: 48rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
  text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
}

.start-desc {
  font-size: 28rpx;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 40rpx;
}

// 轮数选择器
.cycles-selector {
  margin-bottom: 40rpx;
}

.selector-label {
  font-size: 28rpx;
  margin-bottom: 20rpx;
  opacity: 0.9;
}

.cycles-options {
  display: flex;
  gap: 16rpx;
  justify-content: center;
}

.cycle-option {
  padding: 12rpx 24rpx;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 20rpx;
  font-size: 24rpx;
  backdrop-filter: blur(10rpx);
  transition: all 0.2s ease;

  &.active {
    background: rgba(255, 255, 255, 0.4);
    transform: scale(1.1);
  }

  &:active {
    transform: scale(0.95);
  }
}

.start-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ff8e88 100%);
  color: #fff;
  border: none;
  padding: 20rpx 60rpx;
  border-radius: 50rpx;
  font-size: 32rpx;
  font-weight: 600;
  box-shadow: 0 8rpx 20rpx rgba(255, 107, 107, 0.4);

  &:active {
    transform: translateY(2rpx);
  }
}

// 呼吸练习容器
.breathe-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.breathe-circle {
  width: 300rpx;
  height: 300rpx;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  transition: all 1s ease-in-out;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.2);
  margin-bottom: 40rpx;

  &.inhale {
    background: radial-gradient(circle, #00b894, #00a085);
    transform: scale(1.2);
  }

  &.hold {
    background: radial-gradient(circle, #fdcb6e, #e17055);
    transform: scale(1.15);
  }

  &.exhale {
    background: radial-gradient(circle, #6c5ce7, #a29bfe);
    transform: scale(0.8);
  }
}

.breathe-text {
  font-size: 36rpx;
  font-weight: 600;
  margin-bottom: 20rpx;
}

.breathe-countdown {
  font-size: 64rpx;
  font-weight: 700;
}

.breathe-description {
  font-size: 28rpx;
  color: #fff;
  text-align: center;
  opacity: 0.9;
  line-height: 1.5;
}

// 完成状态
.breathe-completed {
  text-align: center;
  color: #fff;
}

.completed-icon {
  font-size: 100rpx;
  margin-bottom: 30rpx;
}

.completed-title {
  font-size: 42rpx;
  font-weight: 700;
  margin-bottom: 20rpx;
}

.completed-desc {
  font-size: 28rpx;
  line-height: 1.6;
  opacity: 0.9;
}

// 控制按钮
.game-controls {
  display: flex;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.control-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 20rpx;
  font-size: 28rpx;
  font-weight: 500;
  transition: all 0.2s ease;

  &.stop-btn {
    background: linear-gradient(135deg, #fdcb6e 0%, #f39c12 100%);
    color: #fff;
  }

  &.restart-btn {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(10rpx);
  }

  &.continue-btn {
    background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
    color: #fff;
  }

  &:active {
    transform: scale(0.95);
  }
}

// 说明区域
.breathe-instructions {
  background: rgba(255, 255, 255, 0.95);
  padding: 30rpx;
  border-radius: 24rpx;
  backdrop-filter: blur(10rpx);
}

.instruction-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  text-align: center;
  margin-bottom: 30rpx;
}

.breathing-steps {
  margin-bottom: 30rpx;
}

.step-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 24rpx;

  &:last-child {
    margin-bottom: 0;
  }
}

.step-number {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24rpx;
  font-weight: 600;
  color: #fff;
  margin-right: 20rpx;
  flex-shrink: 0;
}

.inhale-step .step-number {
  background: #00b894;
}

.hold-step .step-number {
  background: #fdcb6e;
}

.exhale-step .step-number {
  background: #6c5ce7;
}

.step-content {
  flex: 1;
}

.step-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 8rpx;
}

.step-desc {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
}

// 益处说明
.benefits {
  border-top: 1rpx solid #eee;
  padding-top: 20rpx;
}

.benefits-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
}

.benefit-item {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8rpx;
}
</style>
